<template>

  <div>
    <div class="pubicLoc">当前位置: <a href="/missworld/home">首页</a>&nbsp;&gt;&nbsp;佳丽美图</div>
    <div class="artCon">
      <div class="artit">
        {{infoTile}}
      </div>
      <div class="artime" v-if="String(infoTime).length > 0">
        时间：{{timestampToTime(infoTime)}}
      </div>
    </div>
    <div class="zoombox">
      <div class="zoompic" style="text-align: center;">
        <img :src="url" :title="alt" style="display: inline;max-height: 100%;">
      </div>
      <div v-if="alt.length > 0" id="zoompicAlt" style="width: 684px;height: 50px;line-height:50px;text-align: center;">{{alt}}</div>
      <div class="sliderbox">
        <div id="btn-left" @click="leftPicShow" class="arrow-btn" style="cursor: pointer;"></div>
        <div class="slider" id="thumbnail">
          <ul :style="{width:ulWidth,left:ulLeft}">
            <li :class="index == 0 ? current : ''" v-for="(item,index) in pictureurls">
              <img :id="flag+index" @click="changePhoto(index,item.url,item.alt)" :src="item.url" style="max-height: 100%;" :alt="item.alt">
            </li>
          </ul>
          <div style="clear: both;"></div>
        </div>
        <div @click="rightPicShow" id="btn-right" class="arrow-btn dasabled" style="cursor: auto;"></div>
      </div>

    </div>
  </div>

  <!--图集详情 开始-->
  <!--<div class="xgbddtl pubCon">-->
    <!--<div class="pubicLoc">当前位置: <a href="/missworld/home">首页</a>&nbsp;&gt;&nbsp;佳丽美图</div>-->
    <!--<div class="artCon">-->
      <!--<div class="artit">-->
        <!--{{infoTile}}-->
      <!--</div>-->
      <!--<div class="artime" v-if="String(infoTime).length > 0">-->
        <!--时间：{{timestampToTime(infoTime)}}-->
      <!--</div>-->
    <!--</div>-->
    <!--<div v-for="item in pictureurls" style="text-align: center;">-->
      <!--<img :src="item.url" :alt="item.alt" style="max-width:884px;max-height:563px;"><br>-->
      <!--<p v-if="item.alt.length > 0">{{item.alt}}</p>-->
    <!--</div>-->
  <!--</div>-->
  <!--图集详情 结束-->
</template>

<script>
  export default {
    //数据
    data(){
      return {
        url:'',//显示第一张图片
        alt:'',//显示第一张图片的alt
        ulWidth:0,//ul宽度
        ulLeft:0,//ul向左偏移量
        flag:'flag',//li 标签下面的 img class名
        current:'current',//li 当前选中的 class名
        currentFlag:1,//当前显示的第几张图片，1为第二张；向左向右点击时作判断标记用
        slider:{},//slider 对象
        slider_child_l:0,//ul 下 li 标签的个数
        slider_width:120,//li 标签的宽度，默认给120
        slider_count:0,//图集轮播起始数量
        infoId:0,//图集id
        infoTile:'',//图集标题
        infoTime:'',//图集时间
        pictureurls:[]
      }
    },
    mounted(){
      let _this = this;
      _this.slider = $('.slider ul');
    },
    methods:{
      //滑动图片
      slider_pic:function(){
        let _this = this;
        if (_this.slider_count >= _this.slider_child_l - 5) {
          $('#btn-right').css({cursor: 'auto'});
          $('#btn-right').addClass("dasabled");
        }
        else if (_this.slider_count > 0 && _this.slider_count <= _this.slider_child_l - 5) {
          $('#btn-left').css({cursor: 'pointer'});
          $('#btn-left').removeClass("dasabled");
          $('#btn-right').css({cursor: 'pointer'});
          $('#btn-right').removeClass("dasabled");
        }
        else if (_this.slider_count <= 0) {
          $('#btn-left').css({cursor: 'auto'});
          $('#btn-left').addClass("dasabled");
        }
      },
      //点击向右 改变大图同时改变缩略图 按钮
      rightPicShow:function(){
        let _this = this;

        //是否轮播到最后一张
        if(_this.currentFlag < _this.slider_child_l){
          //点击向右按钮时，改变 zoompic 下的 img 大图
          $(".zoompic img").attr({"src": _this.pictureurls[_this.currentFlag].url, "title":_this.pictureurls[_this.currentFlag].alt});
          //改变 图片注释语
          $("#zoompicAlt").html(_this.pictureurls[_this.currentFlag].alt);
          _this.currentFlag++;
        }

        //缩略图选中状态 class名 current 更新
        $("#thumbnail li.current").removeClass("current");
        $("#flag"+(_this.currentFlag - 1)).parent().addClass("current");

        //如果图片数量小于 5 或者 已经轮播到最后一张则不继续轮播
        if (_this.slider_child_l < 5 || _this.slider_count >= _this.slider_child_l - 5) {
          return false;
        }
        //轮播次数 加 1 同时样式调整
        _this.slider_count++;
        _this.slider.animate({left: '-=' + _this.slider_width + 'px'}, 'fast');
        _this.slider_pic();
      },
      //点击向左 展示图片 按钮
      leftPicShow:function(){
        let _this = this;

        //是否轮播到第一张
        if(_this.currentFlag >= 1){
          //改变 zoompic 下的 img 大图
          $(".zoompic img").attr({"src": _this.pictureurls[_this.currentFlag - 1].url, "title":_this.pictureurls[_this.currentFlag - 1].alt});//点击向右按钮时，改变大图
          //改变 图片注释语
          $("#zoompicAlt").html(_this.pictureurls[_this.currentFlag - 1].alt);
          _this.currentFlag--;
        }

        //缩略图选中状态 class名 current 更新
        $("#thumbnail li.current").removeClass("current");
        $("#flag"+(_this.currentFlag)).parent().addClass("current");

        if (_this.slider_count <= 0) {
          return false;
        }
        //轮播次数 减 1 同时样式调整
        _this.slider_count--;
        _this.slider.animate({left: '+=' + _this.slider_width + 'px'}, 'fast');
        _this.slider_pic();
      },
      //点击缩略图切换图片
      changePhoto:function(flagId,picUrl,alt){
        let _this = this;
        //设置 currentFlag
        _this.currentFlag = flagId;

        $(".zoompic img").attr({"src": picUrl, "title":(alt?alt: '图片')});
        $("#zoompicAlt").html(alt);
        $("#thumbnail li.current").removeClass("current");
        $("#flag"+flagId).parent().addClass("current");
        return false;
      },
      timestampToTime:function (timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return Y+M+D+h+m+s;
      },
    },
    created(){
      let _this = this;
      //将前面query带过来的 infoId 参数赋值给该组件定义的 tmpData 值
      _this.infoId= this.$route.query.infoId;

      //请求接口获取 图集详情
      _this.$http.get('http://m.nsr.com.cn/xinsilu/v1/pictureNsr/getPictureNsrById?id='+_this.infoId, {
        params: {}
      }).then(response => {
        if (response.data.code == 'R0000000') {
          _this.pictureurls = JSON.parse( response.data.data.pictureurls );
          _this.url = _this.pictureurls[0].url;//默认显示第一张图片
          _this.alt = _this.pictureurls[0].alt?_this.pictureurls[0].alt:'';//默认显示第一张图片的alt
          _this.infoTile = response.data.data.title;//图集标题
          _this.infoTime = response.data.data.publishTime;//图集发布时间
          _this.ulWidth = ((_this.pictureurls.length + 1) * 120)+'px';//设置ul宽度
          _this.slider_child_l = _this.pictureurls.length;//ul 下 li 标签的个数
          _this.ulLeft = 0;//设置ul向左偏移量
        }
      }, response => {
      });
    },
  }
</script>
<style scoped>
@import "../../static/css/pictureDetail.css";
</style>
